<template>
  <div class="home" ref="rootSource">
    <!-- <canvas id="source1" style="width: 25%" ref="source1"></canvas>
    <canvas id="source2" style="width: 25%" ref="source2"></canvas>
    <canvas id="source3" style="width: 25%" ref="source3"></canvas>
    <canvas id="source4" style="width: 25%" ref="source4"></canvas> -->
  </div>
</template>
<script>
import JSMpeg from '@P/jsmpeg'

export default {
  name: 'Home',
  data() {
    return {
      cameras: {}
    }
  },
  components: {},
  methods: {
    JSMpegRun() {
      let self = this
      let axios = self.axios
      let listUrl = axios.adornUrl('/camera/cameraList')
      axios({
        url: listUrl,
        method: 'get'
      })
        .then(({ data }) => {
          let rootSource = this.$refs.rootSource
          if (Array.isArray(data)) {
            this.cameras = data
            data.forEach((value, index, array) => {
              let el = document.createElement('canvas')
              el.innerHTML = '数据内容2。。。'
              el.className = 'row'
              el.id = 'div' + index
              rootSource.appendChild(el)
              value.el = el
            })

            this.intervalplay()
          }
        })
        .catch((e) => {})
    },
    runCamera(data) {
      console.log(data)
      let player = new JSMpeg.Player(data.playbackUrl, {
        canvas: data.el,
        decodeFirstFrame: true,
        disableWebAssembly: false,
        throttled: false, //这里设置为false，不然不触发onSourceCompleted事件
        chunkSize: 4 * 1024 * 1024,
        disableGl: false,
        audio: false,
        autoplay: true,
        loop: true,
        onSourceCompleted: (data) => {
          console.log(data)
        }
      })
      data.player = player
      player.play()
    },
    intervalplay() {
      let self = this
      let data = self.cameras
      if (Array.isArray(data)) {
        data.forEach((value, index, array) => {
          setTimeout(function () {
            self.runCamera(value)
            console.log(100 * index + 100)
          }, 100 * index + 100)
        })
      }
    }
  },
  mounted() {
    this.JSMpegRun()
  }
}
</script>
<style lang="less">
.row {
  width: 300px;
  height: 300px;
}
</style>
